<!-- 我的预约 -->
<template>
    <div class='about_wrapper'>
        <ul class="list_con">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData">
                <div v-if="ReservatData.length>0">
                    <li class="list_every" v-for="(v,i) in ReservatData" :key="i" @click="PostDetail(v)">
                        <div class="kb"></div>
                        <div class="fbImg"><img src="@/assets/my/shijians.png" alt="">预约时间：{{v.appointmentTime}}</div>
                        <van-divider />
                        <p class="fbCon"><span>#{{v.eventType}}#：</span><span>{{v.title}}</span></p>
                        <div class="noticexx">
                            <div>{{v.createTime}}</div>
                        </div>
                    </li>
                </div>
                <div class="noData" v-else><img src="@/assets/my/kkk.png" alt=""></div>
            </van-list>
        </ul>
    </div>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                ReservatData: [], //预约数据
                pageIndex: 1,
                pageSize: 8,
                totalCount: 0,
                loading: false,
                finished: false,
            };
        },
        //方法集合
        methods: {
            loadData() {
                // 异步更新数据
                setTimeout(() => {
                    this.loading = true;
                    this.loadappoints();
                    this.loading = false;
                    if (this.ReservatData.length >= this.totalCount) {
                        this.finished = true;
                    }
                }, 1000);
            },
            loadappoints() {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.post('contradictoryController/load_public', {
                    userId: this.slow.userInfo.openId, // "ohOIg1N1pv4AnrRZ_gFlV1T6nsls", //this.slow.userInfo.openId,
                    // userId: '111',
                    pageIndex: this.pageIndex,
                    pageSize: 15,
                    // typical:1
                }).then(r => {
                    this.$toast.clear();
                    console.log(r);
                    // this.ReservatData = r.array;
                    this.ReservatData = this.ReservatData.concat(r.array);
                    this.totalCount = r.pageInfo.totalCount;
                    this.pageIndex += 1;
                })
            },
            PostDetail(v) {
                this.$router.push({
                    path: '/MyAppointxq',
                    query: {
                        Datas: v
                    }
                });
            }
        },
        // created() {
        //     this.loadappoints();
        // }
    }
</script>
<style lang="scss" scoped>
    .list_con {
        padding: 0 8vw;
        .list_every {
            .fbCon {
                padding: 0px 5px;
                span:nth-child(1) {
                    color: #079fed;
                    margin-right: 5px;
                }
            }
            .fbImg {
                padding-left: 15px;
                margin-top: 15px;
                height: 9vw;
                line-height: 9vw;
                img {
                    width: 25px;
                    height: 25px;
                    vertical-align: middle;
                    margin-right: 15px;
                }
            }
            .kb {
                width: 84vw;
                height: 20px;
                background: #dfe3e7;
            }
            .noticexx {
                display: flex;
                margin: 15px 0;
                justify-content: flex-end;
                padding-right: 5px;
            }
        }
        .noData {
            position: absolute;
            top: 0px;
            bottom: 0;
            width: 84vw;
            display: flex;
            justify-content: center;
            img {
                display: block;
                width: 50vw;
                height: 50vw;
                margin-top: 40vw;
            }
        }
    }
</style>